<template>
    <el-select
               v-model="props.form[props.item.prop]"
               :size="props.item.size?props.item.size:'default'"
               filterable
               :allow-create=" props.item.allowCreate ? props.item.allowCreate : false "
               :clearable=" props.item.clearable ? props.item.clearable : true "
               :disabled="props.item.disabled ? props.item.disabled : false"
               :multiple="props.item.multiple ? props.item.multiple : false"
               @change=" props.item.$events && props.item.$events.changeSelect ? props.item.$events.changeSelect($event,props.form) : $forceUpdate() "
               :placeholder="props.item.placeholder ? props.item.placeholder : '请选择' ">
        <el-option  v-for="(opt,index) in  props.options" :key="index" 
            :disabled="opt.disabled ? opt.disabled : false" 
            :label="(props.item.initDatas&&props.item.initDatas.name)?(props.item.addLable?(props.item.addLableObj.before?(props.item.addLableObj.beforeStr?props.item.addLableObj.beforeStr:'')+opt[props.item.addLableObj.name]+props.item.addLableObj.type+opt[props.item.initDatas.name]:opt[props.item.initDatas.name]+props.item.addLableObj.type+opt[props.item.addLableObj.name]+(props.item.addLableObj.type1?props.item.addLableObj.type1:'')+(props.item.addLableObj.name1?opt[props.item.addLableObj.name1]:'')):opt[props.item.initDatas.name]):opt.label" 
            :value="(props.item.initDatas&&props.item.initDatas.value)?opt[props.item.initDatas.value]:opt.value">
            <span v-if="props.item.addLable">
                <span :style="props.item.addLableStyle" v-if="props.item.addLableObj.before">{{props.item.addLableObj.beforeStr?props.item.addLableObj.beforeStr:''}}{{opt[props.item.addLableObj.name]}}{{props.item.addLableObj.type}}</span>
                {{(props.item.initDatas&&props.item.initDatas.name)?(opt[props.item.initDatas.name]):opt.label}}
                <span :style="props.item.addLableStyle" v-if="!props.item.addLableObj.before">{{props.item.addLableObj.type}}{{opt[props.item.addLableObj.name]}}{{props.item.addLableObj.type1?props.item.addLableObj.type1:''}}{{props.item.addLableObj.name1?opt[props.item.addLableObj.name1]:''}}{{props.item.addLableObj.name2?opt[props.item.addLableObj.name2]:''}}
                </span>
            </span>
            <span v-else>{{(props.item.initDatas&&props.item.initDatas.name)?opt[props.item.initDatas.name]:opt.label}}</span>
        </el-option>
    </el-select>
</template>
<script setup>
const props = defineProps({
    item :{
            required:true,
            type:Object,
        },
        form:{
            required:true,
            type:Object,
        }
})
let options=reactive([])
function getOptions(){
    var url = props.item.url;
    var param = props.item.params ;
    if(!url){return null; }
    this.$axios
        .post(url,param)
        .then(res => {
            if(res.status == 200 && res.data.code == 1){
                options = res.data.result;
                console.log(options);
            }else{
                this.$message({
                    type:"error",
                    message:'数据查询失败，请稍后重试！！！'
                });
            }
        });
}  
watch(props.item, (value) => {
  if (value.url) {
    getOptions()
  } else {
    options = value.options
  }
})
</script>
<style scoped>

</style>




